@import "../define/global";

$border-radius: 10px;

.sidebar-nav {
  // 真正内容view背景颜色
  -fx-sidebar-nav-bg-color: #FFF;
  // 侧边栏颜色
  -fx-sidebar-bg-color: #FFF;
  -fx-sidebar-border-color: #bbb;
  // 菜单按钮选中时颜色
  -fx-menu-bg-color-selected: #009688;
  // 菜单按钮hover时颜色
  -fx-menu-bg-color-hover: #009688;

  -fx-background-radius: 0 0 $stage-border-radius $stage-border-radius;
  -fx-border-radius: 0 0 $stage-border-radius $stage-border-radius;
  -fx-background-color: -fx-sidebar-nav-bg-color;
  -fx-border-color: transparent;


  // 右侧视图面版
  .content {
    -fx-background-radius: 0 0 $stage-border-radius 0;
    -fx-border-radius: 0 0 $stage-border-radius 0;
    -fx-background-color: -fx-base;
    -fx-background-insets: 0;
  }

  // 左侧菜单面板
  .sidebar {
    -fx-vbar-policy: NEVER;
    -fx-hbar-policy: NEVER;
    -fx-min-width: 220px;
    -fx-max-width: 220px;
    -fx-background-color: -fx-sidebar-bg-color;
    -fx-border-color: -fx-sidebar-border-color;
    -fx-border-width: 0 1px 0 0;
    -fx-fit-to-height: true;
    -fx-fit-to-width: true;
    -fx-background-insets: 0;

    .viewport {
      -fx-background-color: transparent;
      -fx-border-color: transparent;
    }

    .sidebar-menus {
      -fx-alignment: top-center;
      @include ladderTextFill(-fx-sidebar-bg-color);
      -fx-spacing: 10px;
      -fx-pref-width: 210px;
      -fx-background-radius: 0 0 0 $stage-border-radius;
      -fx-border-radius: 0 0 0 $stage-border-radius;

      // 菜单分组
      .sidebar-menu {
        -fx-pref-width: 166px;
        -fx-padding: 10px 0 0 10px;
        -fx-text-fill: ladder(-fx-sidebar-bg-color, $md_grey_200 45%, $md_grey_300 46%, $md_grey_400 59%, $md_grey_500 60%);
      }

      // 菜单按钮
      .sidebar-menu-item {
        -fx-background-color: transparent;
        -fx-border-color: transparent;
        -fx-font-size: 13px;
        -fx-pref-width: 166px;
        -fx-text-fill: inherit;
        -fx-min-height: 30;
        -fx-border-radius: 3px;
        -fx-background-radius: 3px;
        -fx-alignment: center-left;

        &:selected {
          @include ladderTextFillForce(-fx-menu-bg-color-selected);
          -fx-background-color: -fx-menu-bg-color-selected !important;
        }

        &:hover {
          @include ladderTextFill(-fx-menu-bg-color-hover);
          -fx-background-color: -fx-menu-bg-color-hover;
          -fx-cursor: hand;
        }

        .icon {
          -fx-icon-size: 14px !important;
          -fx-max-width: 18px;
          -fx-min-width: 18px;
          -fx-pref-width: 18px;
          -fx-text-fill: inherit;
        }
      }
    }
  }

}


